<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('实时成绩')" />
    <style>
        html{
            font-size: 10px;
            font-weight: bold;
        }
        body{
            display: flex;
            color: #fff;
        }
        .main-ctn{
            flex: 1;
            z-index: 999;
            /*background: rgb(0, 0, 0, 0.2);*/
        }
        .bg-ctn{
            position: absolute;
            z-index: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .bg-ctn img{
            width: 100%;
            height: 100%;
        }

        .match-info{
            text-align: center;
            font-size: 8rem;
            margin-top: 5rem;
            color: red;
        }

        #main_con{
            margin-top: 22rem;
            padding: 0 2rem;
            border-radius: 1rem;
            height: calc(100% - 600px);
        }
        .item-name{
            text-align: center;
            font-size: 6rem;
            color: red;
        }
        .ranking-header{
            /*color: red;*/
        }
        .ranking-list{
            overflow: hidden;
            height: 100%;
        }
        .item{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            border-bottom: 1px solid #fff;
            text-align: center;
            padding: 10px 0;
            font-size: 3rem;
        }


    </style>
</head>
<body ondblclick="toggleFullScreen()">
    <div class="main-ctn">
         <div class="match-info hide">[[${match.name}]]</div>

         <div id="main_con">

         </div>

    </div>

    <div class="bg-ctn black-bg">
        <img th:src="@{${match.screenImage}}">
    </div>

    <script id="tmpl_main" type="text/template">
        <div class="item-name">${register.itemName}</div>
        <div class="ranking-header">
            <div class="item">
                <div class="ranking">名次</div>
                <div class="player-name">选手</div>
                <div class="works-name">作品名称</div>
                <div class="score">成绩</div>
            </div>
        </div>
        <div class="ranking-list">
            {{each(i,r) registerScoreList}}
            <div class="item">
                <div class="ranking">${r.ranking}</div>
                <div class="player-name">${r.playerName}</div>
                <div class="works-name">${r.worksName}</div>
                <div class="score">${r.finalScore.toFixed(2)}</div>
            </div>
            {{/each}}
        </div>

    </script>

    <th:block th:include="include :: footer" />
    <script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "js/score";
        var wsUrl = [[${wsUrl}]];
        var placeId = [[${placeId}]];

        // 全屏显示
        function toggleFullScreen() {
            $(document).toggleFullScreen();
        };

        function refreshMainCtn(registerId) {
            $.get(prefix + "/getScreenRankingData", {registerId}, function (res) {
                $("#main_con").empty();
                $("#tmpl_main").tmpl(res.data).appendTo("#main_con");
                autoScrollRankingList();
            });
        }

        socket();
        function socket() {

            if (window.WebSocket && window.MozWebSocket) {
                console.log("浏览器不支持websocket")
            }

            var ws = new WebSocket(wsUrl);

            // 收到消息后触发
            ws.onmessage = function (msg) {
                // 服务器连接后默认发送online字符串
                if(msg.data == "pong"){
                    return;
                }
                var data = JSON.parse(msg.data);
                switch (data.type) {
                    case "screenScore":
                        if((placeId && placeId != data.placeId)){
                            break;
                        }
                        refreshMainCtn(data.registerId);
                        break;
                }
            };

            //建立连接后触发
            ws.onopen = function () {
                console.log("ws连接成功");
            };

            // 关闭连接时候触发
            ws.onclose = function () {
                reconnect();
            };

            //发生错误的时候触发
            ws.onerror = function () {
                reconnect();
            };
        }

        // 每隔5秒重连
        var lock = false;
        function reconnect() {
            if (lock) return;
            lock = true;
            setTimeout(function () {
                socket();
                lock = false;
            }, 5 * 1000);
        }


        var intervalId;
        function autoScrollRankingList(){
            if(intervalId){
                clearInterval(intervalId);
            }
            var height = $(".ranking-list").height();
            var scrollHeight = $(".ranking-list")[0].scrollHeight;
            if(scrollHeight > height){
                intervalId = setInterval(function () {
                    var scrollTop = $(".ranking-list")[0].scrollTop;
                    scrollTop += 1;
                    if((scrollTop + height - scrollHeight) >= 1){
                        scrollTop = 0;
                    }
                    $(".ranking-list").scrollTop(scrollTop);
                }, 100);
            }
        }


    </script>
</body>
</html>